<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SmartMad Monitor</title>
<link rel="stylesheet" href="../assets/css/bootstrap-spacelab.css" />
<link rel="stylesheet" href="../assets/css/base.css?t=20130516173114" />
	
  <!-- template
    ================================================== -->
    <script id="t_a" type="text/html">
        <table class="table table-striped table-bordered table-condensed">
            <thead>
                <tr>
                    <th>
                       		 状态
                    </th>
                    <th>
                      		 主机
                    </th>
                    <th>
                        	IP
                    </th>
                    <th>
                       		监控节点             
                    </th>
                    <th>
                         	上次上传时间
                    </th>
                    <th>
                        	总计在线时间
                    </th>					
                    <th>
                        	操作
                    </th>
                </tr>
            </thead>
            <tbody>
                <% 
					for (var i in json) { var item = json[i],k = item[0];
				 %>
                <tr>
                    <td>
                        <i class="<%= (map[k] && map[k][1]) || '' %>" title="<%= (map[k] && map[k][0]) || '状态未知' %>"></i>
                    </td>
                    <td>
                       <a href="<%= item[5] %>"><%= i %></a> 
                    </td>
                    <td>
                        <%= item[1] %>
                    </td>
                    <td>
                        <%= item[3] %>
                    </td>
                    <td>
                        <%= item[2] %>
                    </td>
                    <td>
						<%= item[4] %>
                    </td>
					<td>
						<a href="<%= item[6] %>" > <i class="icon-search" title="查看监测事件"></i> </a>
					</td>
                </tr>
                <% } %>
            </tbody>
        </table>
    </script>
<style>
</style>

</head>
<body>
    <header>
        <h1>服务器列表</h1>
        <div id="toolbar">
        	<div class="box_2">
        		<button class="btn" id="add" style="display:none;"><i class="icon-plus"></i> 添加服务器</button>
        	</div>  
        	<div class="btn-group box_3">
        		<button class="btn" data-status="">全部</button>
            	<button class="btn" data-status="up">运行</button>
            	<button class="btn" data-status="down">宕机</button>
				<button class="btn" data-status="unmonitored">未监控</button>
           		<button class="btn" data-status="unscaling">Auto Scaling 未服务</button>
        	</div>  		   	
        	<div class="box_1">
            	<div class="form-horizontal">
                	<input type="text" name="search" style="width:10em;">
                	<button class="btn" id="search"><i class="icon-search"></i> 搜索</button>
            	</div>
        	</div>
        </div> 
    </header>	

    <div id="mainbody">
        <div id="server">
        </div>
    </div>

  <!-- js part
    ================================================== -->
<script src="../assets/js/library/jquery-1.7.1.js"></script>
<script src="../assets/js/library/bootstrap.min.js"></script>
<script src="../assets/js/library/template.js"></script>
<script src="../assets/js/helper.js?t=20130516173114"></script>
<script src="../assets/js/doc.js?t=20130516173114"></script>	
<script>
$(function(){
    var smartMad = window.smartMad = window.smartMad || {};
	var domain = domainURI();
    var version = urlParams('version');
	
    var serverStatus = urlParams('status') || '';
    
    var _url = "http://" + domain + "/mmsapi" + version;
	
    var serverConf = {
        url: _url + "/get/server/@all" + serverStatus
    };
	
	
    var serverCall = function(e, json){
    
        var $th = $(this), data, html;
        
        //$th.html(JSON.stringify(json));return;
        ///////////////////////////////////////////////
        
        $.each(json, function(k, v){
            v.push('serverStatus.html?name=' + k + '&version=' + version);
            v.push('../monitor/monitorEvent.html?selector=' + k + '&version=' + version);
        });
        
        ///////////////////////////////////////////
        data = {
            json: json,
			map: smartMad.serverStatusMap 
        };
        
        ///////////////////////////////////////////
        
        html = template('t_a', data);
        $th.html(html);
        
    };
  
    var $server = $('#server');
	
  	//////////////////////////////////////////////////////////
      
      if (serverStatus) {
          $('button[data-status="' + serverStatus + '"]').addClass('active').siblings().removeClass('active');
      }
      
      $('header .btn-group button').click(function(){
          var $th = $(this);
          var status = $th.attr('data-status') || '';
          $th.addClass('active').siblings().removeClass('active');
          
          $('#server').getData({
              url: _url + "/get/server/@all" + status
          });
          
      });
  
  
    ///////////////////////////////////////////////////////////
	
    $('#search').click(function(){
		var find = $("input[name='search']").val();
        $('#server').getData({url:_url + "/get/server/@all" + (find ? '/' + find : '')});
    });

	$('input[name="search"]').enterPress(function(e){
		$("#search").click();
	});	
	
	///////////////////////////////////////////////////////////
    
    $('#add').click(function(){
       //location.href = 'editServer.html?version=' + version;
    });
    
    ///////////////////////////////////////////////////////////////	
    
    $server.bind('ajax.success', serverCall).getData(serverConf);
    
});
</script>
</body>
</html>